* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*:focus {
  outline: none;
}
body {
  font-family: Arial, Helvetica, Calibri;
  line-height: 1.5;
  font-size: 16pt;
}
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body::-webkit-scrollbar-thumb {
  background: #025;
}
#print {
  position: fixed;
  right: 32pt;
  bottom: 32pt;
  height: 64pt;
  width: 64pt;
  user-select: none;
  cursor: pointer;
  border-radius: 50%;
  background-size: 32pt;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  background-image: url("print-solid.svg");
  transition: box-shadow 0.2s;
}
#print:hover {
  box-shadow: 0 0 8pt;
}
#print:active {
  box-shadow: inset 0 0 8pt;
}
#resume {
  margin: 0 auto;
  min-width: 960pt;
  max-width: auto;
  min-height: auto;
  overflow: hidden;
  color: #000;
  background: #fff;
}
#resume:after {
  display: block;
  clear: both;
  content: '';
}
#side,
#main {
  float: left;
  display: inline-block;
}
#side {
  min-height: auto;
  width: 384pt;
  color: #fff;
  background: #047;
  line-height: 2;
}
#side > div {
  padding: 32pt 32pt 0 32pt;
}
#side > div:before {
  margin: 0 -32pt;
  padding: 0 32pt;
}
#side > div:first-child,
#side > div:last-child {
  padding: 32pt;
}
#avatar {
  background: #025;
  position: relative;
}
#photo {
  width: 100%;
  display: block;
}
#fileOpen {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
#name,
#position {
  line-height: 1.25;
}
#name {
  font-size: 3em;
}
#position {
  font-size: 1.25em;
  font-style: italic;
  padding-top: 16pt;
}
#personalInfo:before,
#skill:before,
#language:before {
  font-size: 1.25em;
  line-height: 2.5;
  display: block;
  content: attr(data-label);
  background: #025;
}
#personalInfo > div,
#skill > div,
#language > div {
  padding-top: 16pt;
}
#personalInfo > div:before,
#skill > div:before,
#language > div:before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
}
#personalInfo > div:first-child,
#skill > div:first-child,
#language > div:first-child {
  padding-top: 32pt;
}
#language .ruler {
  height: 64pt;
}
#language .ruler > div:first-child {
  background: #4caf50;
}
#language .ruler > div:last-child {
  background: #ffc107;
}
#language .ruler > div {
  display: inline-block;
  height: 100%;
}
#language .desc > div:before {
  content: '';
  display: block;
  float: left;
  margin: 7.2pt 0;
  margin-right: 16pt;
  height: 16pt;
  width: 32pt;
}
#language .desc > div:first-child:before {
  background: #4caf50;
}
#language .desc > div:last-child:before {
  background: #ffc107;
}
#main {
  width: calc(100% - 384pt);
}
#intro {
  padding: 32pt;
  line-height: 2;
}
#education:before {
  padding: 0 32pt;
  border-top: 1pt solid #047;
  border-bottom: 1pt solid #047;
  color: #047;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 2;
  display: block;
  content: attr(data-label);
}
#education td {
  vertical-align: middle;
  padding: 4pt;
}
#education > table {
  font-size: 1em;
  line-height: 2;
  padding: 32pt 32pt 0 32pt;
  width: 100%;
  border-spacing: 0;
}
#education > table .school {
  font-size: 1.25em;
  font-weight: bold;
}
#education > table td:nth-child(2) {
  text-align: right;
}
#education > table .ruler {
  padding: 0.5em 0;
}
#education > table .ruler div {
  position: absolute;
  height: 8pt;
}
#education > table .ruler > div {
  position: relative;
}
#education > table .ruler .sup {
  background: #fff;
}
#education > table .ruler .sub[data-num='1'] {
  background: #9289f3;
}
#education > table .ruler .sub[data-num='2'] {
  background: #aade46;
}
#education > table .ruler .sub[data-num='3'] {
  background: #43a1ff;
}
#education > table .ruler .sub[data-num='4'] {
  background: #d021a5;
}
#education > table .ruler .sub[data-num='5'] {
  background: #f76b1c;
}
#education > table .ruler .sub[data-num='6'] {
  background: #f02fc2;
}
#education > table .ruler .sub[data-num='7'] {
  background: #17ead9;
}
#education > table .ruler .sub[data-num='8'] {
  background: #5d6874;
}
#education > table .desc {
  padding: 0.5em 0;
}
#education > table .desc:after {
  display: block;
  clear: both;
  content: '';
}
#education > table .desc > div {
  float: left;
  padding-right: 16pt;
}
#education > table .desc > div:before {
  content: '';
  display: block;
  float: left;
  margin: 7.2pt 0;
  margin-right: 8pt;
  height: 16pt;
  width: 32pt;
}
#education > table .desc > div:last-child {
  padding-right: 0;
}
#education > table .desc > div:nth-child(1):before {
  background: #9289f3;
}
#education > table .desc > div:nth-child(2):before {
  background: #aade46;
}
#education > table .desc > div:nth-child(3):before {
  background: #43a1ff;
}
#education > table .desc > div:nth-child(4):before {
  background: #d021a5;
}
#education > table .desc > div:nth-child(5):before {
  background: #f76b1c;
}
#education > table .desc > div:nth-child(6):before {
  background: #f02fc2;
}
#education > table .desc > div:nth-child(7):before {
  background: #17ead9;
}
#education > table .desc > div:nth-child(8):before {
  background: #5d6874;
}
#education > table:last-child {
  padding: 32pt;
}
#experience:before,
#project:before {
  padding: 0 32pt;
  border-top: 1pt solid #047;
  border-bottom: 1pt solid #047;
  color: #047;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 2;
  display: block;
  content: attr(data-label);
}
#experience td,
#project td {
  vertical-align: middle;
  padding: 4pt;
}
#experience > table,
#project > table {
  font-size: 1em;
  line-height: 2;
  padding: 32pt 32pt 0 32pt;
  width: 100%;
  border-spacing: 0;
}
#experience > table .title,
#project > table .title {
  font-size: 1.25em;
  font-weight: bold;
}
#experience > table td:nth-child(2),
#project > table td:nth-child(2) {
  text-align: right;
}
#experience > table:last-child,
#project > table:last-child {
  padding: 32pt;
}
#experience .employer {
  font-size: 1.25em;
}
ul {
  list-style-type: square;
}
li {
  margin-left: 16pt;
}
@media print {
  #print {
    display: none;
  }
  #resume {
    margin: 0 !important;
    width: 100vw !important;
  }
  #resume,
  #side,
  #main {
    height: 100vh !important;
  }
}
